<template>
	
	<view class="toptem">
	<view class="page-body" :class="[app.setCStyle(from)]">
		<view class="img" > 
			<image src='@/static/public/images/jiamentop.jpg' width="100%" class="jiamentopimg" />
		</view>
		<view class="top">
			
			<!--<button  class="fs30 bottom-btn primarybtn">
				申请填写资料
			</button>-->
			<view class="item">
				<view class="left">姓名</view>
				<input type="text" v-model="addressData.username" placeholder-class="line" placeholder="请输入您的姓名" />
			</view>
			<view class="item">
				<view class="left">联系电话</view>
				<input type="number" v-model="addressData.phone" placeholder-class="line" placeholder="请输入手机号码" />
			</view>
			
			<!-- 四级省市区 -->
			<view class="item" @tap="showUniAddressSelector = true;">
				<view class="left">所在地区</view>
				<input disabled type="text" v-model="addressData.merger_name" placeholder-class="line"
					placeholder="省市区县" />
				<text class="right-arrow"></text>
			</view>
			 
			<view class="item address">
				<view class="left">详细地址</view>
				<textarea type="text" v-model="addressData.address" placeholder-class="line" placeholder="请输入联系地址" />
			</view>
			 
			
			
			<!--1区县代理 2市 3省 4街道-->
			<view class="item daili">  
					<radio-group @change="handleChange">
						<label class="uni-list-cell uni-list-cell-pd" >
							<view class="daili_jibie"><radio value="3" />省级代理</view> 
							<view class="daili_jibie"><radio value="1" />区县代理</view>
							<view class="daili_jibie"><radio value="4"  />街道代理</view>
						</label>
						  
						<label class="uni-list-cell uni-list-cell-pd" >
							
						</label>
						 
					</radio-group> 
			</view>
		 
		</view>
	 
	
	<u-toast ref="uToast" />
	<!-- 四级省市区 -->
	<UniAddressSelector v-if="showUniAddressSelector" :areaInfoSelected="areaInfoObj" @cancel="handleCancel"
		@confirm="handleConfirm">
	</UniAddressSelector>
		<button type="warning" shape="circle"  class="fs30 bottom-btn primarybtn"   @click="submit">
			提交申请
		</button>
		
		<view v-for="(item,index) in jiamenglist" :key="index" class="bg-white mb20 listtab" style="height: 210px;padding-left: 20px;padding-top: 8px;padding-right: 20px;">
			<view class="flex"> 
				<view class="flex_bd ml20">
					 
					<view class="flex">
						<view class="goods_name_sun flex_bd" >加盟地址:{{item.address}}</view>
					</view>
					<view class="flex">
						<view class="goods_name_sun flex_bd" >合作方式：{{item.hezuofs}}</view>
					</view>
					<view class="flex">
						<view class="goods_name_sun flex_bd" >代理类型：{{item.level_idname}}</view>
					</view>
					<view class="flex">
						<view class="goods_name_sun flex_bd" v-if="item.status==1">已审核 {{item.addtime}}</view>
						<view class="goods_name_sun flex_bd" v-if="item.status==0">未审核 {{item.addtime}}</view>
						<view class="goods_name_sun flex_bd" v-if="item.status==3">已拒绝 {{item.rank}} {{item.addtime}}</view>
					</view>
				 
					 
				</view>
			</view>
		</view>
 
	</view>
	</view>
</template>
<script>
	// 四级省市区
	import UniAddressSelector from '@/components/UniAddressSelector';
	export default {
		components: {
			UniAddressSelector
		},
		data() {
			return {
				from: '',
				region_code:[],
				addressData: {
				}, 
				isLoading:false,
				id:'', 
				value:0,	
				jiamenglist:[],
				baseUrl:this.config.baseUrl,
				// 四级省市区
				showUniAddressSelector: false,
				areaInfoObj: {
					fullAreaTextInitial: '',
					provinceObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					cityObj: {
						id: '',
						name: '',
					},
					areaObj: {
						id: '',
						name: '',
					},
					streetObj: {
						id: '',
						name: '',
					},
				}
				 
			}
		},
		onLoad(options) {
			this.app.isLogin(this);//强制登陆
			this.id = options.id;
			this.from = options.from;
			
			let title = '填写申请资料';
		
			//this.manageType = options.type;
			this.manageType = 'edit';
			uni.setNavigationBarTitle({
				title
			});
			//this.lodaData();
			this.jiamenglists();
		},
		methods: {
			jiamenglists(){
				this.$u.post('shop/api.Index/getjiamenList', this.param).then(res => {
					this.jiamenglist = res.data.list; 
				})
			},
			
			
			handleChange(e) {
				this.addressData.level_id = e.detail.value; 
			},
			
			/*
			lodaData() {
				//
				this.$u.post('member/api.Center/getPrizewinData?id='+this.$route.query.id).then(res => {
					 
					//let addressData = this.addressData;
					this.addressData = res.data;
					/*
					if (this.list.photo != '') {
						this.list.photo = this.config.baseUrl + this.list.photo;
					}
					*
						
				});
			},
			*/
			
		 

			//提交
			submit() {
				if (this.isLoading == true){
					return false;
				}
				let data = this.addressData;
				if (!data.username) {
					this.$refs.uToast.show({
						title: `请输入您的姓名`,
						type: 'error',
						position:'top'
					});
					return;
				}
				if (!/(^1[0-9]{10}$)/.test(data.phone)) {
					this.$refs.uToast.show({
						title: `请输入正确的手机号码`,
						type: 'error',
						position:'top'
					});
					return;
				}
				if (!data.address) {
					this.$refs.uToast.show({
						title: `请输入详细地址.`,
						type: 'error',
						position:'top'
					});
					return;
				}
				if (!data.merger_name) {
					this.$refs.uToast.show({
						title: `请填写意向合作地域名称.`,
						type: 'error',
						position:'top'
					});
					return;
				}
				 
				this.isLoading  = true;
				//this.$api.prePage()获取上一页实例，可直接调用上页所有数据和方法，在App.vue定义
				var pages = getCurrentPages(); //当前页
				var beforePage = pages[pages.length - 2]; //上个页面
				var url = this.manageType=='edit' ? 'member/api.center/editjiamen' : 'member/api.center/editjiamen';
				 
				this.$u.post(url, data).then(res => {
					this.isLoading = false;
					this.$refs.uToast.show({
						title: `申请${this.manageType=='edit' ? '': ''}成功,等待平台审核!`,
						type: 'success',
						position:'top'
					})
					uni.setStorageSync("id", this.id);
					
				}).catch(res=>{
					this.isLoading = false;
				})
			},
			// 四级省市区
			handleCancel() {
				this.showUniAddressSelector = false;
			},
			handleConfirm(areaInfoObj) {
				this.showUniAddressSelector = false;
				this.areaInfoObj = areaInfoObj;
			
				//显示文字到空控件上
				this.addressData.merger_name = areaInfoObj.fullAreaTextInitial
				this.addressData.regionIds = [
					areaInfoObj.provinceCode,
					areaInfoObj.cityCode,
					areaInfoObj.areaCode,
					areaInfoObj.streetCode
				].join(',');
			},
		}
	}
</script>

<style lang="scss" scoped>
	
	.page-body{
		background: url("/static/public/images/bg_bubbles.png");
		background-size: 100% 100%;
		position: fixed;
		background-repeat:no-repeat;
		width: 100%;
		height: 100%;
		
		.times {
		  background: #FF781A;
		  text-align: center; 
		  width: 300px;
		  height: 55px;
		  line-height: 55px;
		  border-radius: 20px;
		  color: #fff;
		  margin: 0 auto;
		  margin-top: 180px; 
		  display: block; 
		  font-weight: 700;
		  font-size: 40rpx;
		}
		.listtab{
			width: 90%;
			margin: 0 auto;
			border-radius: 15px;
			margin-bottom: 30px;
		}
		.goods_name_sun{
			display: block;
			    font-size: 15px;
			    color: #333;
			    line-height: 26px;
			    height: 26px;
			    overflow: hidden;
			    text-overflow: ellipsis;
			    display: -webkit-box;
			    -webkit-line-clamp: 2;
			    -webkit-box-orient: vertical;
		}
		
	}
	.swiper-box {
		height: calc(100% - 50px);
		margin-top: 20px;
	}
	.goods_name {
		display: block;
		font-size: 32rpx;
		color: $font-color-dark;
		line-height: 45rpx;
		height: 90rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	
/deep/ .line {
	color: $u-light-color;
	font-size: 28rpx;
}
uni-button:after{
	border: 0;
	height: 15%;
}
.toptem {
		background: url("/static/public/images/jiamenbg.png");
		background-size: 100% 100%;
		position: fixed;
		background-repeat: no-repeat;
		width: 100% !important;
		height: 100% !important;
		display: block;
		overflow-y: auto;
		overflow-x:hidden;
		scrollIndicator:all;
		.img{
			width: 100%;
			height: 500rpx;
		}
		.jiamentopimg{
			width: 100%;
			height: 500rpx;
		}
	}
.page-body {
	.bottom-btn{
		position:static;
	}
	.top {
		background-color: #ffffff;
		 
		border-top: solid 2rpx $border-color-light;
		padding: 30rpx;
		width: 92%;
		height: auto;
		margin: 0 auto;
		margin-top: 28rpx;
		//overflow-y: auto;
		.item {
			display: flex;
			font-size: 28rpx;
			line-height: 100rpx;
			align-items: center;
			//border-bottom: solid 2rpx $border-color-light;
			//position: relative;
			.left {
				width: 180rpx;
			}
			input {
				text-align: left;
				font-size: 28rpx;
			}
		}
		.daili{
			width: 90%;
			height: 300rpx;
			.daili_jibie{
				display:flex;
				width: 49%;
				line-height: 80rpx;
				height: 80rpx;
				display: inline-block;
				text-align: center;
			}
			.uni-list-cell-pd{
				width: 100% !important;
			}
		}
		
		.right-arrow{
			display: inline-block;
			width: 16rpx;
			height: 16rpx;
			border-top: 1rpx solid #666666;
			border-right: 1rpx solid #666666;
			transform: rotate(45deg);
			position: absolute;
			right: 0;
		}
		.address {
			padding: 20rpx 0;
			textarea {
				// width: 100%;
				height: 100rpx;
				line-height: 50rpx;
				padding: 0 40rpx;
				font-size: 28rpx;
			}
		}
		.site-clipboard {
			padding-right: 40rpx;
			textarea {
				// width: 100%;
				height: 150rpx;
				background-color: #f7f7f7;
				line-height: 60rpx;
				margin: 40rpx auto;
				padding: 20rpx;
			}
			.clipboard {
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 26rpx;
				color: $u-tips-color;
				height: 80rpx;
				.icon {
					margin-top: 6rpx;
					margin-left: 10rpx;
				}
			}
		}
		.isdefault {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			.tips {
				font-size: 24rpx;
				color: #999999;
			}
			.right {
			}
		}
	}
	
}

</style>
